<template>
	<nut-popup 
		v-model:visible="visible"
		safe-area-inset-bottom
		:close-on-click-overlay="false"
		:custom-style="customStyle"
	>
		<view class="modal">
			<view class="img-row-1">
				<view class="left-img">
					<image class="text" src="https://free.picui.cn/free/2025/10/18/68f306dfbed18.png" mode="aspectFill"></image>
					<image class="red-packet" src="https://free.picui.cn/free/2025/10/18/68f30254054ef.png" mode="aspectFill"></image>
				</view>
				<view class="close-btn" @click="visible = false">
					<nut-icon name="close-little" size="10" custom-color="#fedbae"></nut-icon>
				</view>
			</view>
			<view class="img-row-2">
				<image class="text" src="https://free.picui.cn/free/2025/10/18/68f306dfbdd2d.png" mode="aspectFill"></image>
			</view>
			<view class="content-box">
				<scroll-view 
					id="tabs-scroll"
					class="tabs-scroll"
					scroll-x 
					scroll-with-animation 
					:scroll-left="scrollLeft"
				>
					<view
						v-for="(item, index) in tabList"
						:key="index"
						class="tabs-item"
						:class="{
							'tabs-active':
								tabActive === index,
						}"
						@click="clickTab(index)"
					>
						{{ item }}
					</view>
				</scroll-view>
				<view class="list-box">
					 <view class="card-item" v-for="item in 8" :key="item">
					 	<view class="content">
							<image src="https://free.picui.cn/free/2025/10/18/68f325c46a508.png" mode="aspectFill"></image>
							<view class="flex-1">
								<view class="label-row">
									<view class="label">好友浏览红包</view>
									<view class="desc">(微信用户02321)</view>
								</view>
								<view class="time-row">2025-9-22 19:22</view>
							</view>
						</view>
						<view class="footer">
							<image src="/src/static/activity/redPacket/type-icon1.png" mode="aspectFill"></image>
							<text>好友浏览</text>
						</view>
					 </view>
				</view>
			</view>
			<view class="desc">
				<view class="text haptics-feedback">查看领取记录</view>
			</view>
		</view>
	</nut-popup>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
import Empty from '@/components/Empty/index.vue'
import { useScrollTabs } from '@/hooks/useScrollTabs'

const instance = getCurrentInstance()

const customStyle = {
	backgroundColor: 'transparent'
}

const visible = defineModel('visible', {
	default: false
})

const tabList = ['全部', '免单红包', '好友浏览', '好友购买', '拓客激励']

const { tabActive, scrollLeft, scrollToActive } = useScrollTabs(null, instance.proxy)

const clickTab = async (index) => {
    scrollToActive('tabs', index, 5)
}
</script>

<style lang="scss" scoped>
.modal {
	width: 692rpx;
	padding: 34rpx 24rpx 26rpx;
	border-radius: 30rpx;
	background: linear-gradient(180deg, #FED9AA 0%, #FFFFFF 100%);
	.img-row-1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 40rpx;
		.left-img {
			display: flex;
			align-items: center;
			gap: 14rpx;
			.text {
				width: 246rpx;
				height: 70rpx;
			}
			.red-packet {
				width: 46rpx;
				height: 46rpx;
			}
		}
		.close-btn {
			display: inline-block;
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			margin-right: 24rpx;
			background-color: #fff;
		}
	}
	.img-row-2 {
		.text {
			width: 288rpx;
			height: 46rpx;
		}
	}
	.content-box {
		height: 55vh;
		display: flex;
		flex-direction: column;
		.tabs-scroll {
			overflow-x: auto;
			white-space: nowrap;
			margin: 26rpx 0 58rpx;
			.tabs-item {
				height: 46rpx;
				padding: 0 20rpx;
				margin-right: 10rpx;
				display: inline-flex;
				align-items: center;
				border-radius: 46rpx;
				background-color: #FFE7C7;
				color: #6E6E6E;
				&:last-of-type {
					margin-right: 0;
				}
			}
			.tabs-active {
				background-color: #fff;
				color: #000;
			}
		}
		.list-box {
			flex: 1;
			overflow-y: auto;
			.card-item {
				margin-bottom: 28rpx;
				padding: 0 26rpx 0 46rpx;
				border-radius: 10rpx;
				background-color: #FA9D3B;
				&:last-of-type {
					margin-bottom: 0;
				}
				.content {
					padding: 28rpx 0 22rpx;
					display: flex;
					align-items: center;
					gap: 16rpx;
					border-bottom: 1rpx solid rgba(255, 255, 255, 0.19);
					image {
						width: 74rpx;
						height: 92rpx;
						flex-shrink: 0;
					}
					.label-row {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;
						.label {
							font-size: 32rpx;
							color: #fff;
						}
						.desc {
							color: #FDD3A7;
						}
					}
					.time-row {
						color: #FDD3A7;
					}
				}
				.footer {
					padding: 10rpx 0;
					display: flex;
					align-items: center;
					gap: 6rpx;
					image {
						width: 42rpx;
						height: 42rpx;
					}
					text {
						color: #fff;
					}
				}
			}
		}
	}
	.desc {
		margin-top: 26rpx;
		display: flex;
		justify-content: center;
		.text {
			padding: 20rpx;
			color: #8C8C8C;
		}
	}
}
</style>